<template>
  <div class="login-container">
    <div class="login-form">
      <h1 class="title">课程管理系统</h1>

      <el-form :model="loginForm" class="form" ref="form" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名" size="large" class="input-field" />
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" class="input-field"
            show-password />
        </el-form-item>

        <el-form-item prop="userType">
          <el-radio-group v-model="loginForm.userType" style="display: flex; justify-content: center;">
            <el-radio :label="2"><span style="color: #fff;">教师</span></el-radio>
            <el-radio :label="3"><span style="color: #fff;">教务管理员</span></el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" size="large" class="login-button" @click="handleLogin">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        userType: 3
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    handleLogin() {
      // 验证表单
      this.$refs["form"].validate(flag => {
        if (flag) {
          console.log('登录信息:', this.loginForm)
          // 网络请求
          login(this.loginForm).then(res => {
            console.log(res);
            if (res.code === 0) {
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 1000,
              });

              // 先把数据处理好，再放在vuex中
              let group = []
              for (let bit = 0; bit < 8; bit++) {
                // 0100 0000
                // 0010 0000
                if (((1 << bit) & res.data.permission) === 1 << bit) {
                  group.push((1 << bit).toString());
                }
              }
              console.log(group);
              res.data.group = group;
              
              // 更新vuex中的数据
              this.$store.commit('user/updatainfo', res.data)


              // 跳转
              this.$router.push('/home')
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  width: 100vw;
  /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
  background: url(../assets/背景图.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.login-form {
  background: rgba(90, 90, 90, 0.4);
  padding: 40px 35px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 380px;
}

.title {
  color: white;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 35px 0;
  letter-spacing: 1px;
}

.form {
  width: 100%;
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}

.input-field {
  width: 100%;
}

:deep(.input-field .el-input__wrapper) {
  background: white;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  padding: 12px 15px;
  height: 48px;
}

:deep(.input-field .el-input__inner) {
  color: #333;
  font-size: 14px;
}

:deep(.input-field .el-input__inner::placeholder) {
  color: #999;
}

.radio-group {
  display: flex;
  gap: 30px;
  width: 100%;
}

.radio-item {
  color: white !important;
}

:deep(.radio-item .el-radio__input.is-checked .el-radio__inner) {
  background: white;
  border-color: white;
}

:deep(.radio-item .el-radio__input.is-checked .el-radio__inner::after) {
  background: #5a5a5a;
}

:deep(.radio-item .el-radio__inner) {
  border-color: white;
  background: transparent;
}

:deep(.radio-item .el-radio__label) {
  color: white;
  font-size: 14px;
}

.admin-radio {
  color: #409eff !important;
}

:deep(.admin-radio .el-radio__input.is-checked .el-radio__inner) {
  background: #409eff;
  border-color: #409eff;
}

:deep(.admin-radio .el-radio__input.is-checked .el-radio__inner::after) {
  background: white;
}

:deep(.admin-radio .el-radio__inner) {
  border-color: #409eff;
}

:deep(.admin-radio .el-radio__label) {
  color: #409eff;
}

.login-button {
  width: 100%;
  height: 48px;
  background: #409eff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

:deep(.login-button:hover) {
  background: #66b1ff;
}

:deep(.login-button:active) {
  background: #3a8ee6;
}
</style>